<template>
	<view class="cate">
		<!-- 商品分类列表 -->
		<view class="cate-list">
			<view class="item" :class="{active:item.id==selectedId}" v-for="(item,index) in cateList" :key="index"
				@tap="selectCate(item.id)">
				{{item.name}}
			</view>
		</view>
		<!-- 商品列表 -->
		<scroll-view class="cate-goods" scroll-y >
			<view class="item2" v-for="(item,index) in goodsList" :key="index">
				<view class="pic">
					<image :src="item.goods_big_logo" mode=""></image>
				</view>
				<view class="msg">
					<view class="name">
						{{item.name}}
					</view>
					
					<view class="price">
						￥{{item.price}}
					</view>
				</view>
			</view>

		</scroll-view>
	</view>
</template>


<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	onLoad(() => {
		getCateList()
		getCateGoodsList(38)
	})

	let selectedId = ref(0)

	function selectCate(id) {
		selectedId.value = id
		// 根据点击类别的id,请求对应id的商品列表
		getCateGoodsList(id)
	}
	let cateList = ref([])

	async function getCateList() {
		let res = await uni.$post("/categoryListLevel", {
			level: 1
		})
		if (res.code = 200) {
			cateList.value = res.result;
			// 首位添加全部类别
			cateList.value.unshift({
				id: 0,
				name: '全部'
			})
		}
		console.log(cateList.value)
	}

	let goodsList = ref([])
	async function getCateGoodsList(cid) {
		let res;
		if (cid == 0) {
			res = await uni.$post("/goodsListPage", {
				"page": 1,
				"number": 20
			})
			if (res.code = 200) {
				goodsList.value = res.goodsList.map(item=>{
					item.goods_big_logo=uni.$base_url+item.goods_big_logo
					return item
				})
			}
		} else {
			res = await uni.$post("/goodsListPage_catTwo", {
				"cat_two_id": cid,
				"page": 1,
				"number": 10
			})
			if (res.code == 200) {
				goodsList.value = res.goodsList.map(item=>{
					item.goods_big_logo=uni.$base_url+item.goods_big_logo
					return item
				})
			}
		}
		console.log(goodsList.value)
	}
	// let res=uni.getWindowInfo()
	// console.log(res)
</script>

<style>
	.cate{
		display: flex;
	}
	.cate-list {
		width: 180rpx;
		border: 1px solid red;
		/* #ifdef MP-WEIXIN */
		height: 100vh;
		/* #endif */
		height: calc(100vh - 90px);
	}

	.cate-list>.item {
		font-size: 26rpx;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
	}

	.cate-list>.active {
		background-color: #ff6700;
		color: #eee;
	}
	.cate-goods{
		width: 570rpx;
		height: calc(117vh - 117px);
	}
	.item2{
		width: 525rpx;
		border: 1px solid #ccc;
		padding: 10rpx;
		margin: 10rpx;
		display: flex;
		justify-content: space-between;
	}
	.item2>.pic{
		width: 150rpx;
		height: 150rpx;
		border: 1px solid #ccc;
	}
	.item2>.pic>image{
		width: 100%;
		height: 100%;
	}
	.item2>.msg{
		width: 360rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.item2>.msg>.name{
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		font-size: 14px;
		color: #000;
	}
	.item2>.msg>.price{
		color: red;
	}
</style>